<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">

		<view :style="{ height: navTop + 'px' }"></view>

		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>选择数字人</text>
		</view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">


			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 选择数字人</text>
		</view>
		<!-- <view class="allSelect margin-top_40rpx">

			<uv-checkbox-group v-model="checkboxValue" shape="circle" @change="changeCheckAll">
				<uv-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name"
					:name="item.name"></uv-checkbox>
			</uv-checkbox-group>
		</view> -->


		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			@up="upCallback">
			<view class="solder flex-wrap-flex-start-center">
				<view class="add-digital-cls flex-column" @click="addDigital()">
					<image mode="widthFix" :src="group3389Nine"></image>
					<view>增加数字人</view>
				</view>
				<view class="solderVideo" v-for="(item,index) in list" :key="index">
					<image class="img-124" :src="item.video_cover" mode="aspectFill"></image>
					<view class="">
						<view class="margin_10rpx_0 font-overflow" style="width: 220rpx;">
							{{item.name}}
						</view>
						<!-- <view class="flex-start-center margin-bottom_20rpx" @click="editFn(item)">
							<text style="color: rgb(113, 103, 255);margin-right: 20rpx;">编辑 </text>
							<image class="editImg" :src="group3128" mode=""></image>
						</view> -->
					</view>
					<uv-checkbox-group shape="circle" v-model="radiovalue" @change="e=>changeCheck(e,item.id)">
						<uv-checkbox :name="item.id"></uv-checkbox>
					</uv-checkbox-group>
				</view>
			</view>
		</mescroll-body>

		<view class="c-but flex" @click="complete()">完成</view>
		<!-- 	<view class="v-call">
			<view class="flex-around">
				<view class="flex-column" @click="goTo(3)">
					<image class="addSolder" :src="uploader" mode=""></image>
					<view style="font-size: 26rpx;margin-top: 10rpx">上传素材</view>

				</view>
				<view class="">
					<picker mode="selector" @change="bindPickerChange2" :data-userId="item.folder_id" :range="groupList"
						:range-key="'groupName'">
						<view class="flex-column">
							<image class="addSolder" :src="path" mode=""></image>
							<view style="font-size: 26rpx;margin-top: 10rpx;">移动素材</view>
						</view>
					</picker>


				</view>
				<view class="flex-column" @click="deleteFn()">
					<image class="addSolder" :src="group3150" mode=""></image>
					<view style="font-size: 26rpx;margin-top: 10rpx;">删除素材</view>

				</view>
			</view>
		</view> -->
		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>修改文件素材名称</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="card margin-bottom_50rpx">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" @input="changeInputTop" type="text" v-model="solderName"
									placeholder="请输入标题" />
							</view>


						</view>

					</view>

					<view class="PublishTags flex" @click="payNow()">
						确定
					</view>

				</view>

			</template>
		</sunui-popup>


		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="v-pop-cls">
					<view class="margin-bottom_50rpx font-size_36rpx display-a-jc">新建文件夹</view>
					<view class="display-a-js">
						<view>
							文件夹名称
							<span class="must">*</span>
						</view>
						<input style="height: 76rpx;padding: 0 22rpx;" type="text" v-model="fileName"
							class="input-frame" placeholder="请输入文件夹名称" placeholder-class="placeholder" />
					</view>


					<view class="sunui-flex-space-around margin-top_60rpx">
						<view class="confirm-btn" @click="confirm()">确认</view>
						<view class="cancel-btn" @click="cancel()">取消</view>
					</view>
				</view>
			</template>
		</sunui-popup>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				group3128: this.$imgs.group3128,
					group3389Nine: this.$imgs.group3389Nine,
				uploader: this.$imgs.uploader,
				group3150: this.$imgs.group3150,
				path: this.$imgs.path,
				solderName: '',

				groupList: [],
				info: {

				},


				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				arr: [],
				radiovalue: [],
				checkboxValue: '',
				// 基本案列数据
				checkboxList: [{

					disabled: false,
					name: '全选'
				}],
				list: [],
				submitParams: '',
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
			}
		},
		onLoad(options) {

			const app = getApp();
			this.navTop = app.globalData.navTop;
			console.log(options)
			// this.info = JSON.parse(options.info)
			this.createdgetSystemInfo()
			// 文件转移
			// this.folderListFn()

		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		computed: {


		},
		methods: {
			addDigital(){
				this.$sun.navTo('/pages/digitalHuman/cloneList')
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},
			async folderListFn() {

				const result = await this.$http.get({
					url: this.$api.folderList,
					data: {
						uid: uni.getStorageSync('uid'),

						type: 1
					}
				});
				if (result.errno == 0) {
					this.groupList = result.data.map((item) => {
						return {
							folder_id: item.id,
							groupName: item.name

						}
					})
				} else {

					this.$sun.toast(result.message)
				}

			},
			async fileChangeFn(target_id) {
				// 新建文件夹
				const result = await this.$http.get({
					url: this.$api.fileChange,
					data: {
						uid: uni.getStorageSync('uid'),

						file_id: this.arr.length == 1 ? this.arr[0] : this.arr.join(
							','),
						target_id: target_id,
						type: 1
					}
				});
				if (result.errno == 0) {
					this.solderName = ''
					this.$sun.toast(result.message)
					this.$refs.serviceItemsPopup.close()

					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})
				} else {
					this.solderName = ''
					this.$sun.toast(result.message)
				}
			},
			async payNow() {
				if (!this.solderName) {
					this.$sun.toast('请输入文件素材名称', 'none')
					return
				}
				let info
				info = {
					// 用户id
					uid: uni.getStorageSync('uid'),
					type: 1,
					name: this.solderName,
					id: this.submitParams.id,
					folder_id: this.submitParams.folder_id,
					file: this.submitParams.file,
					cover: this.submitParams.cover,


				}

				// 新建文件夹
				const result = await this.$http.get({
					url: this.$api.fileSave,
					data: {
						...info
					}
				});
				if (result.errno == 0) {
					this.solderName = ''
					this.$sun.toast(result.message)
					this.$refs.serviceItemsPopup.close()

					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})
				} else {
					this.solderName = ''
					this.$sun.toast(result.message)
				}
			},


			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.avatarPage,
					data: {
						uid: uni.getStorageSync("uid"),
						is_status: 2,
						page: scroll.num,
						psize: 10
					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log(this.list)
				}

			},
			navBack() {
				this.$sun.navBack()
			},

			changeCheck(e, index) {
				console.log(e, index)


				if (this.arr.includes(index)) {

					let a = this.arr.indexOf(index); // 查找索引
					this.arr.splice(a, 1);
					if (this.arr != -1) {
						this.radiovalue = this.arr
					}

				} else {
					this.arr.push(index)


					console.log(this.arr)

					this.radiovalue = this.arr
				}
				if (this.radiovalue.length == this.list.length) {
					this.checkboxValue = ['全选']
				}





			},
			complete() {
				if (this.radiovalue.length) {
					console.log(this.radiovalue)

					const result = this.list.filter(item => this.radiovalue.includes(item.id));
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.$vm.digitalHumanFn(JSON.stringify(result));
					// uni.navigateBack(3);

					uni.navigateBack();

					// this.getVideoCountFn(this.projectId)


				} else {
					this.$sun.toast('请勾选一个数字人形象', 'none')
				}
			},
			changeCheckAll(e) {
				console.log(e[0])

				if (e[0] == '全选') {
					let ids = this.list.map(item => item.id);
					this.radiovalue = ids
				} else {
					this.radiovalue = []
					this.arr = []
				}
			},


			//账号状态
			bindPickerChange2(e) {
				console.log("---->", e, this.groupList[e.detail.value].folder_id);
				if (this.arr.length) {
					this.fileChangeFn(this.groupList[e.detail.value].folder_id)
				} else {
					this.$sun.toast('请选择至少一个素材进行转移', 'none')
				}




			},
			deleteFn() {
				console.log(this.arr)
				if (this.arr.length) {
					uni.showModal({
						title: '是否确定要删除',
						content: '是否要删除， 该素材，如果删除，将不可恢复，请您谨慎选择',
						success: async (res) => {
							if (res.confirm) {
								const result = await this.$http.get({
									url: this.$api.fileDel,
									data: {
										// 用户id
										uid: uni.getStorageSync('uid'),
										type: 1,

										file_id: this.arr.length == 1 ? this.arr[0] : this.arr.join(
											','),


									}
								});
								if (result.errno == 0) {

									this.radiovalue = []
									this.arr = []
									this.$sun.toast(result.message)
									this.$nextTick(() => {
										this.mescroll?.resetUpScroll();
									})

								}

							} else if (res.cancel) {

							}
						}
					});
				} else {
					this.$sun.toast('请选择至少一个素材删除', 'none')
				}

			},
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()
			},
			editFn(item) {
				this.$refs.serviceItemsPopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
				this.submitParams = item
			},
			changeBox(e) {
				console.log(e)
			},
			confirm() {
				this.$refs.pop.close()
			},
			cancel() {
				this.$refs.pop.close()
			},

			// type 1:新建文件夹 2:删除文件夹 3:上传素材 4:素材搬家
			goTo(type) {
				console.log('点击========type', type);
				if (type == 1) {
					this.$refs.pop.show({
						anim: 'center',
						shadeClose: false,
						topclose: false
					});
				}
				if (type == 2) {
					let ids = [];
					this.fileList.map(d => {
						if (d.checked) {
							ids.push(d.id);
						}
					});
					console.log('ids', ids, ids.length, 'ids.length <= 0', ids.length <= 0);
					if (ids.length <= 0) {
						this.$sun.toast('请选择文件夹', 'none');
						return;
					}
					uni.showModal({
						title: '提示',
						content: '确定要删除文件夹吗',
						success: async res => {
							if (res.confirm) {
								const result = await this.$http.post({
									url: this.$api.batchDelete,
									data: {
										ids: ids
									}
								});
								if (result.errno == 0) {
									this.$sun.toast('删除成功');
									setTimeout(() => {
										this.$at.releaseKey('submit');
										this.query();
									}, 1000);
								} else {
									this.$sun.toast(result.success, 'none');
									this.$at.releaseKey('submit');
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					/* this.$at.uniDoFunc({
						key: 'submit',
						success: async () => {
							this.$at.lockKey('submit');
							// 筛选选中的文件
							this.delFile(ids);
						}
					}); */
				}
				if (type == 3) {
					this.$sun.navGo('/pagesA/creatCenter/uploadFiles/uploadFiles', {
						info: JSON.stringify({
							type: 1,
							typeSource: 1,
							...this.info
						})
					});

				}
				if (type == 4) {
					let ids = [];
					this.fileList.map(d => {
						if (d.checked) {
							ids.push(d.id);
						}
					});
					this.moveQueryId = ids;
					console.log('ids', ids, ids.length, 'ids.length <= 0', ids.length <= 0);
					if (ids.length <= 0) {
						this.$sun.toast('请选择文件夹', 'none');
						return;
					}
					if (ids.length > 1) {
						this.$sun.toast('素材搬家仅需选1个文件夹', 'none');
						return;
					}
					this.queryUserFile();
				}
			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;
		position: relative;

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}


		.c-but {

			font-weight: 700;

			padding: 20rpx 40rpx;

			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 3%;
			border: none;

			z-index: 999;


			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, #6475FF, #7464FF 100%);
		}

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		// “新建文件夹” 弹框
		.v-pop-cls {
			padding: 40rpx 26rpx 60rpx;
			border-radius: 20rpx;
			width: 644rpx;
			background-color: #fff;

			.must {
				color: red;
				margin-left: 8rpx;
			}

			.radio-cls {
				transform: scale(0.8);
			}

			.input-frame,
			.no-input-frame {
				padding: 20rpx;
				border-radius: 10rpx;
				width: 360rpx;
			}

			.input-frame {
				border: 2rpx solid #d9d9d9;
			}

			.no-input-frame {
				background: #f0f0f0;
				border: 2rpx solid #f0f0f0;
			}

			.input-frame2 {
				width: 400rpx;
			}
		}

		.allSelect {
			position: absolute;
			right: 20rpx;
			z-index: 999;
		}

		.solder {
			margin-top: 50rpx;

			.add-digital-cls,
			.digital-card-cls {
			border-radius: 20rpx;
			    height: 395rpx;
			    margin-right: 10rpx;
			    margin-bottom: 15rpx;
			}

			.add-digital-cls {
				width: 32%;
				// margin-left: 20rpx;
				border: 2rpx dashed rgb(235, 234, 234);
				background: linear-gradient(144.13deg, rgba(255, 255, 255, 0) 37.281%, rgba(41, 144, 255, 0.21) 95.242%);

				image {
					width: 54rpx;
				}

				view {
					color: rgb(36, 157, 255);
					margin-top: 10rpx;
				}
			}

			.solderVideo {
				position: relative;


				::v-deep.uv-checkbox-group {
					position: absolute;
					top: 20rpx;
					left: 15rpx;
					z-index: 99;
				}


			}

			.img-124 {
				width: 230rpx;
				height: 340.16rpx;
				border-radius: 20rpx;
				margin: 0 5rpx;
				// margin-bottom: 35rpx;

			}


			.solderImg {
				width: 149.24rpx;
				height: 149.3rpx;
			}

			.editImg {
				width: 34.02rpx;
				height: 34rpx;
			}

		}

		.v-call {
			font-size: 29rpx;
			font-weight: 700;
			border-radius: 140rpx;
			padding: 20rpx 40rpx;
			background: #FFFFFF;
			color: #442D25;
			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 6%;
			border: none;

			z-index: 999;

			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.1);

			.addSolder {
				width: 40.3rpx;
				height: 40.3rpx;
			}

		}

	}
</style>